<!-- reportingResults -->
<template>
    <div class="page">
        <!-- 导航栏 -->
        <div class="navBar">
            <customNavBar :leftTetx=leftTetx :titleTest=titleTest></customNavBar>
        </div>
        <!-- 页面内容 -->
        <div class="content">
            <div style="margin-top: 61px;">
                <van-image width=64vw height=53vw :src="viewReport" />
            </div>
            <div>
                <van-progress class="progress" :percentage="80" :show-pivot=false stroke-width="12" />
                <div class='progressd'>
                    解锁进度<span>(80%)</span>
                </div>
            </div>
            <div class='progressc'>
                详版报告解锁中，请稍后...
            </div>
            <div class="progressb" style="color: rgb(140, 140, 140);">
                温馨提示: 详版报告解锁后客户通过原邀请链接也可查看详版报告。      
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup name="reportingResultscz">
import { useRouter, useRoute } from "vue-router"
import { Toast } from '/@/utils/Message';
import { onMounted } from "vue"
import { reactive, ref } from 'vue'
import customNavBar from "/src/components/NavBar/customNavBar.vue"
import viewReport from "../../assets/img/features/scz.gif"

const router = useRouter()
const route = useRoute()
const leftTetx = ref("")
const titleTest = ref("报告结果解锁中")


// const spanOne = ref("生成报告中，")
// const spanTwo = ref("请稍后...")
// const aText = ref("")


const spanOne = ref("已生成报告，请")
const aText = ref("查看报告")

</script>

<!-- less嵌套设置 -->
<style lang="less" scoped>
.page {
    background-color: #FFFFFF;
    height: 100vh;
    width: 100vw;
    overflow-x: hidden;
    .content {
        width: 100%;
        padding-top: 68px;
        overflow: hidden;

        .progress {
            margin-top: 36px;
            margin-left: 20%;
            margin-right: 20%;
        }
        .progressd {
            color: #222222;
            font-size: 14px;
            font-weight: 500;
            margin-top: 22px;
            span {
                color: #007DFA;
            }
        }
        .progressc {
            // width: 317px;
            width: 84%;
            margin-left: 34px;
            font-size: 14px;
            color: #222222;
            font-weight: 500;
            margin-top: 22px;
            text-align: center;
            letter-spacing: 1px;
            span {
                color: #007DFA;
                font-weight: bold;
            }
        }
        .progressb {
            // width: 317px;
            width: 84%;
            margin: 0 auto;
            // margin-left: 34px;
            font-size: 14px;
            color: #222222;
            font-weight: 200;
            margin-top: 22px;
            text-align: left;
            letter-spacing: 1.7px;
        }
    }
}
</style>

